<template>
    <div id="map" class="map" ref="rootmap">

    </div>
</template>

<script>
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import {fromLonLat} from 'ol/proj';
export default{
    
    data(){
        return{
            map:null
        };
    },
    mounted(){
        var mapcon = this.$refs.rootmap;
         var map = new Map({
            target: 'map',
            layers: [
            new Tile({
                source: new OSM()
            })
            ],
            view: new View({
            center: fromLonLat([0, 0]),
            zoom: 2,
            })
        });
    }
}
</script>
  <style>
    .map {
      height: 800px;
      width: 100%;
    }
  </style>
